/*
* 公共设置
* */
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html

module.exports = {
    //入口文件配置
    entry: {
        //可以配置多个入口文件
        main: path.resolve(__dirname, '../src/index'),
    },
    //出口文件配置
    output: {
        //打包的路径
        path: path.resolve(__dirname, '../dist'),
        //打包的文件名称
        filename: '[name].[hash:8].js',
        //公共路径
        publicPath: ''
    },
    //公共模块
    module: {
        rules: [
            //babel语法转换规则
            //npm i babel-loader babel-core babel-preset-env babel-preset-react -D
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        //es6 7 react 转换
                        presets: ['env', 'stage-0', 'react'],
                        //热更新和装饰器插件
                        plugins: ['react-hot-loader/babel','transform-decorators-legacy']
                    },
                }
            },
            { //file-loader 解决css等文件中引入图片路径的问题
                // url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝
                test: /\.(png|jpg|jpeg|gif|svg)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        outputPath: 'assets/images/', // 图片输出的路径
                        name: '[name].[hash:8].[ext]',
                        limit: 5 * 1024
                    }
                }
            },
            //加载字体图标
            {
                test: /\.(woff|woff2|svg|eot|ttf|otf)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10000,
                        name: 'assets/fonts/[name].[hash:8].[ext]'
                    }
                }
            },
            //html中引入img
            {
                test:/\.(html|htm)$/,
                use:'html-withimg-loader'
            }
        ]
    },
    //插件
    plugins: [
        //生产模板
        new HtmlWebpackPlugin({
            title: '测试',                        //生成HTML文件的title，设置template没用
            filename: './index.html',           //打包后html文件名
            template: path.resolve(__dirname, '../public/index.html'),       // 模板的路径
            inject: 'body',                     //生成的js文件插入到的位置，四个选项值 true(body 底部), body(body 底部), head(head 标签内), false(单纯的生成一个html 文件).
            favicon: '',                         // html 文件生成一个 favicon
            hash: true,                         //给生成的js文件hash 值
            minify: {                            //压缩HTML文件
                removeComments: true,           //移除HTML中的注释
                collapseWhitespace: true,       //删除空白符与换行符
                conservativeCollapse: true,
                minifyJS: true                  //js也在一行
            }
        }),
    ],
    //后缀名自动补全
    resolve: {
        extensions: ['.js', '.jsx', '.less', '.scss', '.css'],
    },
    //项目里配置了自动提取node_modules里用到的模块如jquery，也可以在原模板里面通过第三方cdn引入，又是另一种配置了。在 webpack.base.conf.js利配置externals后webpack就不会去打包配置模块
    externals: {
        //'jquery': 'window.jQuery'
    },
    //externals就是webpack可以不处理应用的某些依赖库，使用externals配置后，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。
};